<template>
  <div class="container">
    <div class="cross">
    </div>
    <div class="wrapper" ref="wrapper">
      <table class="table" border="0" cellpadding="0" cellspacing="0" ref="rollingTable"
             :style="{width:pwidth}">
        <tr :key="index1" v-for="(row,index1)  in tableData.rows">

          <td v-if="index1===0" style="width: 40px" class="rows">{{index1}}</td>
          <td v-if="index1===0" class="rows" :key="index" v-for="(col,index)  in row">{{col}}</td>

          <td v-if="index1>0" class="cols">{{index1}}</td>
          <td v-if="index1>0" :key="index" v-for="(col,index)  in row">{{col}}</td>
        </tr>
      </table>
      <div class="loading-wrapper"></div>
    </div>
  </div>

</template>

<script>
  import './style.less';
  // import iScollProbe from 'iscroll/build/iscroll-probe';

  export default {
    name: 'DocTable3',
    props: {
      tableData: {
        type: Object,
      },
      pwidth: String,
      isLoadding: Boolean,
      tableLength: Number,
    },
    components: {},
    data: function() {
      return {
        iScollProbe: {},
        scroll: {},
        frozenCols: [],
        frozenRows: [],
      };
    },
    created() {

    },
    watch: {
      tableLength: function() {
        setTimeout(() => {
          this.frozenCols = document.querySelectorAll('.cols');
          this.frozenRows = document.querySelectorAll('.rows');
          this._refresh();
        }, 50);
      },
    },
    mounted() {
      // 保证在DOM渲染完毕后初始化better-scroll
      setTimeout(() => {
        this.iScollProbe = require('iscroll/build/iscroll-probe');
        this._initScroll();
      }, 50);
    },
    methods: {
      _refresh() {
        this.scroll.refresh();
      },
      _initScroll() {
        if (!this.$refs.wrapper) {
          return;
        }
        // better-scroll的初始化
        console.log(this.iScollProbe);
        this.scroll = new this.iScollProbe('.wrapper', {
          preventDefault: true,
          probeType: 3,
          mouseWheel: false,
          scrollX: true,
          scrollY: true,
          disableMouse: true,
          disablePointer: true,
          lockDirection: true,
          disableTouch: false,
          bounce: false,
          useTransition: true,
        });

        this.scroll.on('scroll', () => {
          // console.log(getComputedStyle(this.$refs.rollingTable).transform.split(',')[4])
          for (let i = 0; i < this.frozenCols.length; i++) {
            this.frozenCols[i].style.transform = 'translate(' + -1 * this.scroll.x + 'px, 0px) translateZ(0px)';

          }
          for (let i = 0; i < this.frozenRows.length; i++) {
            this.frozenRows[i].style.transform = 'translate(0px, ' + -1 * this.scroll.y + 'px) translateZ(0px)';
          }
        });
        // this.scroll.on('beforeScrollStart', () => {
        //   this.scroll.refresh();
        // });
        this.scroll.on('scrollEnd', () => {

          if (getComputedStyle(this.$refs.rollingTable).transform.split(',')[4] == 0) {
            for (let i = 0; i < this.frozenCols.length; i++) {
              this.frozenCols[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
            }
          }
          if (parseInt(getComputedStyle(this.$refs.rollingTable).transform.split(',')[5]) == 0) {
            for (let i = 0; i < this.frozenRows.length; i++) {
              this.frozenRows[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
            }
          }

          //最右边的bug
          if (1041 + parseFloat(getComputedStyle(this.$refs.rollingTable).transform.split(',')[4]) ==
            document.body.offsetWidth) {

            for (let i = 0; i < this.frozenCols.length; i++) {
              this.frozenCols[i].style.transform = 'translate('+ (1041-document.body.offsetWidth)+'px, 0px) translateZ(0px)';
            }
          }

          if (this.scroll.y <= (this.scroll.maxScrollY)+500) {
            if (!this.isLoadding) {
              this.$emit('needMoreData');
            }
          }
        });
      },
    },
  };
</script>

<style scoped>

</style>
